import React, { useEffect, useState } from 'react'
import { Button, Divider, Form, Input, Select, DatePicker } from 'antd';
import './detail.less'
import $axios from '../../../utils/axios';
const {TextArea} = Input
const { Option } = Select;

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};


///////////////////////////////////////
export default function Edit(props: any) {
    const { currentData, back } = props
    const [form] = Form.useForm();

    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({ note: 'Hi, man!' });
                break;
            case 'female':
                form.setFieldsValue({ note: 'Hi, lady!' });
                break;
            default:
        }
    };

    const onFinish = (values: any) => {
        console.log(values);
    };
    //当前服务数据
    const [curData, setCurData] = useState<any>([])
    //要修改的数据
    const [initialValues, setInitialValues] = useState([])
    //对应的居民信息
    const [residentData, setResidentData] = useState<any>([])
    //服务信息
    const [serverData, setServerData] = useState<any>({})
    const [label, setLabel] = useState('')
    const getResidentInfo = () => {
        $axios({
            url: '/api/getAllBasicResidentBySearch',
            method: 'POST',
            data: {
                searchKey: currentData.rname
            }
        }).then(res => {
            console.log('居民信息', res.data);
            setResidentData(res.data[0])
        })
    }
    //获取服务信息
    const getServerInfo = () => {
        $axios({
            url: '/api/getServiceDetailById',
            method: 'POST',
            data: {
                id: currentData.id
            }
        }).then(res => {
            console.log('服务信息', res.data);
            setServerData(res.data)
            setLabel(changeLabelArr(res.data.resident.labelArr))
        })
    }
    //更新标签
    const changeLabelArr = (data: any) => {
        return data.map((item: any, index: number) => {
            return <span key={index}>
                {item.name}
            </span>
        })
    }
    //获取年龄
    const getAge = (birthday: string | Date) => {
        return Math.floor((new Date().getTime() - new Date(birthday).getTime()) / 1000 / 60 / 60 / 24 / 365)
    }
    useEffect(() => {
        console.log(currentData);
        // setCurData(currentData)
        setInitialValues(currentData)
        getResidentInfo()
        getServerInfo()
    }, [])
    ////////////////////////////////////
    return (
        <div style={{ background: '#fff', padding: '20px' }}>
            <h3>编辑服务信息</h3>
            <Divider />
            <h3>居民信息</h3>
            {residentData.gender &&
                <Form
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{ display: 'flex', flexWrap: 'wrap' }}
                    initialValues={{
                        rname: currentData?.rname,
                        rIDCard: currentData?.rIDCard,
                        gender: residentData?.gender ? '' : '',
                        // birthday:residentData?.birthday,
                        tel: residentData?.tel,
                    }}
                >
                    <Form.Item name="rname" label="姓名" rules={[{ required: true }]} >
                        <Input disabled />
                    </Form.Item>
                    <Form.Item name="rIDCard" label="身份证号" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="birthday" label="出生日期" rules={[{ required: true }]} >
                        <DatePicker />
                    </Form.Item>
                    <Form.Item name="tel" label="联系电话" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="IDCrad" label="现居地">
                        <Input />
                    </Form.Item>
                    <Form.Item name="gender" label="居民标签">
                        <Select
                            placeholder="请选择标签"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="0">男</Option>
                            <Option value="1">女</Option>
                        </Select>
                    </Form.Item>
                    {/* <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item> */}
                </Form>
            }

            <Divider />
            <h3>服务信息</h3>
            {serverData.id &&
                <Form
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{ display: 'flex', flexWrap: 'wrap' }}
                    initialValues={{
                        serviceId: serverData?.serviceId,
                        rIDCard: currentData?.rIDCard,
                        gender: residentData?.gender ? '女' : '男',
                        // birthday:residentData?.birthday,
                        tel: residentData?.tel,
                    }}
                >
                    <Form.Item name="serviceId" label="服务编号" rules={[{ required: true }]} >
                        <Input />
                    </Form.Item>
                    {/* <Form.Item name="rIDCard" label="身份证号" rules={[{ required: true }]}>
                    <Input />
                </Form.Item> */}
                    <Form.Item name="gender" label="服务机构" rules={[{ required: true }]}>
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                            style={{width:'200px'}}
                        >
                            {/* <Option value="男">男</Option>
                            <Option value="女">女</Option> */}
                        </Select>
                    </Form.Item>
                    <Form.Item name="gender" label="服务团队">
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                            style={{width:'200px'}}
                        >
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="gender" label="服务医生">
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                            style={{width:'200px'}}
                        >
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="gender" label="服务包">
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                            style={{width:'200px'}}
                        >
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="gender" label="服务项目">
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                            style={{width:'200px'}}
                        >
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="gender" label="服务地点">
                        <Select
                            placeholder="请选择性别"
                            onChange={onGenderChange}
                            allowClear
                            style={{width:'200px'}}
                        >
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="birthday" label="服务时间" >
                        <DatePicker />
                    </Form.Item>
                    <Form.Item name="birthday" label="服务备注"  >
                        <TextArea></TextArea>
                    </Form.Item>
                    {/* <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item> */}
                </Form>}
            <Divider />
            <Button type="primary">提交审核</Button>
            <Button onClick={back}>返回</Button>
        </div>
    )
}

